@include('admin.header')

<link href="/static/admin/css/myadmin.css"  rel="stylesheet" type="text/css">
<script src="/js/echarts/3.4.0/echarts.common.min.js"></script>
<style>
.home_info li em {
   float: left;
   width: 120px;
   font-style: normal;
}
li {
   list-style: none;
}
.blue{
    color: #0000FF;
}
</style>
</head>
<body>
   <div class="wrap">
	   <div id="home_toptip"></div>
	   <div class="text-center" style="font-weight: 700;font-size: 17px;margin: 20px;">欢迎登陆全球购线下商家管理平台！</div>
	   <div>
	        <div style="float: left;width: 48%;padding-right: 2%;">
                <table class="table table-hover table-bordered" style="margin: 5px;">
                    <thead>
                        <tr>
                            <th class="text-center" colspan="3" style="background-color: #D7D7D7;">订单管理</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-center"></td>
                            <td class="text-center">今日订单量</td>
                            <td class="text-center">今日营业额</td>
                        </tr>
                        <tr>
                            <td class="text-center">手机支付</td>
                            <td class="text-center blue">{{floatval($data['mobileOrderNum'])}}</td>
                            <td class="text-center blue">{{floatval($data['mobileOrderAmount'])}}</td>
                        </tr>
                        <tr>
                            <td class="text-center">POS机支付</td>
                            <td class="text-center blue">{{floatval($data['posOrderNum'])}}</td>
                            <td class="text-center blue">{{floatval($data['posOrderAmount'])}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
	        <div style="float: left;width: 48%;padding-left: 2%;">
                <table class="table table-hover table-bordered" style="margin: 5px;">
                    <thead>
                        <tr>
                            <th class="text-center" colspan="3" style="background-color: #D7D7D7;">结算管理</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-center"></td>
                            <td class="text-center">可提现余额</td>
                            <td class="text-center">已提现</td>
                        </tr>
                        <tr>
                            <td class="text-center">手机支付</td>
                            <td class="text-center blue">{{floatval($data['mobileCanCash'])}}</td>
                            <td class="text-center blue">{{floatval($data['mobileCashed'])}}</td>
                        </tr>
                        <tr>
                            <td class="text-center">POS机支付</td>
                            <td class="text-center blue">{{floatval($data['posCanCash'])}}</td>
                            <td class="text-center blue">{{floatval($data['posCashed'])}}</td>
                        </tr>
                        <tr>
                            <td class="text-center">让利存款</td>
                            <td class="text-center blue">{{floatval($data['depositCanCash'])}}</td>
                            <td class="text-center blue">{{floatval($data['depositCashed'])}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
       </div>
       <div style="clear: both;"></div>
       <h4 class="text-center" style="background-color: #D7D7D7;padding: 8px;">营业额趋势图</h4>
       <ul class="nav nav-tabs">
           <li class="tab active" data-id="7"><a href="javascript:;" target="_self">7天</a></li>
           <li class="tab" data-id="30"><a href="javascript:;" target="_self">30天</a></li>
       </ul>
       <div id="echarts" style="width: 100%;height:100%;min-height:340px;"></div>
   </div>
   <script src="/static/js/common.js"></script>
   <script type="text/javascript">
       // 基于准备好的dom，初始化echarts实例
       var regTrendChart = echarts.init(document.getElementById('echarts'));
       var list7={!! $data['lists7'] !!};
       var list30={!! $data['lists30'] !!};
       // 指定图表的配置项和数据
       var regTrendOption7 = {
           title: {
               text: '营业额趋势图'
           },
           tooltip: {},
           legend: {
               left:'center',
               data: ['手机订单营业额','POS订单营业额']
           },
           xAxis: {
               data: list7.xAxis
           },
           yAxis: {},
           series: [{
               name: '手机订单营业额',
               type: 'line',
               data: list7.mobile
           },{
               name: 'POS订单营业额',
               type: 'line',
               data: list7.pos
           }]
       };
       var regTrendOption30 = {
           title: {
               text: '营业额趋势图'
           },
           tooltip: {},
           legend: {
               left:'center',
               data: ['手机订单营业额','POS订单营业额']
           },
           xAxis: {
               data: list30.xAxis
           },
           yAxis: {},
           series: [{
               name: '手机订单营业额',
               type: 'line',
               data: list30.mobile
           },{
               name: 'POS订单营业额',
               type: 'line',
               data: list30.pos
           }]
       };
       regTrendChart.setOption(regTrendOption7);//默认使用7天
       //选项卡点击事件委托 2017-10-12 17:25:12
       $('body').on('click','.tab',function () {
           if($(this).hasClass('active')){
               return false;
           }
           if(this.getAttribute('data-id')==7){
               regTrendChart.setOption(regTrendOption7);
           }else{
               regTrendChart.setOption(regTrendOption30);
           }
            $(this).addClass('active').siblings('.tab').removeClass('active');
       });
   </script>
</body>
</html>